<template>
	<div class="dashboard-container">
		<div class="role">
			<div class="sea">
				<div class="item">
					<div class="sea-item">
						<span>状态</span>
						<el-select v-model="status" clearable @change="search" placeholder="请选择状态">
							<el-option label="待生成" :value="0"></el-option>
							<el-option label="已生成" :value="1"></el-option>
							<el-option label="已确定" :value="2"></el-option>
						</el-select>
					</div>
					<div class="sea-item">
						<span>关键字</span>
						<span>
							<el-input v-model="keywords" clearable placeholder="请输入关键字" style="width: 77%"  @change="search"></el-input>
						</span>
					</div>
					<div class="sea-item">
						<el-button type="primary" @click="search">查询</el-button>
					</div>
				</div>
				<div class="item" v-if="power.includes('quotation_add')">
					<el-button type="primary" @click="addForm">新 增</el-button>
				</div>
			</div>

			<div class="tab">
				<el-table
					v-if="initTableList"
					class="marT"
					:data="initTableList.slice((current-1)*size, current*size)"
					:border="true"
					:header-cell-style="{background:'#eef1f6'}">
					<el-table-column
						align="center"
						type="index"
						label="序号"
						width="50">
					</el-table-column>
					<el-table-column align="center" property="product_name" label="产品名称" width="200"></el-table-column>
					<el-table-column align="center" property="model" label="Model" width="200"></el-table-column>
					<el-table-column align="center" property="test_type" label="提测类型" width="200"></el-table-column>
					<el-table-column align="center" property="servers" label="提测服务器" width="200"></el-table-column>
					<el-table-column align="center" property="status" label="状态" width="200">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status == 0" effect="dark">待生成</el-tag>
							<el-tag v-if="scope.row.status == 1" type="success" effect="dark">已生成</el-tag>
							<el-tag v-if="scope.row.status == 2" type="info" effect="dark">已确定</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" property="price" label="报价（元）" width="200"></el-table-column>
					<el-table-column align="center" label="实验室联系信息" >
						<el-table-column
							prop="laboratory_json.addr"
							align="center"
							width="150"
							:show-overflow-tooltip="true"
							label="地址">
						</el-table-column>
						<el-table-column
							prop="laboratory_json.name"
							align="center"
							width="150"
							label="报价人">
						</el-table-column>
						<el-table-column
							prop="laboratory_json.mobile"
							align="center"
							width="150"
							label="电话">
						</el-table-column>
						<el-table-column
							prop="laboratory_json.email"
							align="center"
							width="250"
							label="E-mail">
						</el-table-column>
					</el-table-column>
					<el-table-column align="center" label="客户信息" >
						<el-table-column
							prop="customer_json.customer_name"
							align="center"
							width="150"
							label="客户名称">
						</el-table-column>
						<el-table-column
							prop="customer_json.user_name"
							align="center"
							width="150"
							label="联系人">
						</el-table-column>
						<el-table-column
							prop="customer_json.mobile"
							align="center"
							width="150"
							label="电话">
						</el-table-column>
						<el-table-column
							prop="customer_json.email"
							align="center"
							width="250"
							label="E-mail">
						</el-table-column>
					</el-table-column>
					<el-table-column align="center" property="own" label="创建信息" width="200">
						<template slot-scope="scope">
						<span>{{getLeader(scope.row.creator_show)}}<br>
							<span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
						</span>
						</template>
					</el-table-column>
					<el-table-column align="center" property="tester_show" label="更新信息" width="200">
						<template slot-scope="scope">
							<span>{{getName(scope.row.updated_by) }}</span><br>
							<span>{{getTime(scope.row.update_time) }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作" fixed="right" width="200">
						<template slot-scope="scope">
							<span><a @click="toDetails(scope.row)">查看</a></span>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="tableSize"
					@size-change="tableSizeChange"
					@current-change="tableCurrentChange"
					:current-page="tableCurrent"
					style="text-align: center;height: 100px;"
					:total="tableTotal">
				</el-pagination>
			</div>
			<addForm ref="addForm"></addForm>

		</div>
	</div>
</template>

<script>

import addForm from "./model/addForm";

import {prototype, sign, options, prototypeGodown, localtion, quotation} from '@/api/user'
export default {
	name: 'Dashboard',
	components: {
		addForm
	},
	data() {
		return {
			receiveUser:'',
			own:'',
			value: '',
			size: 10,
			current: 1,
			total: 0,
			initTableList: [],
			tableSize:10,
			tableCurrent:1,
			tableTotal:1,
			keywords:'',
			status:'',
			localtion:'',
			own_list:[],
			receive_list:[],
			localtionOptions:[],
			power:[]
		}
	},
	mounted () {

	},
	created() {
		this.initTable()
	},
	methods: {
		// 样机入库
		godown(data){
			prototypeGodown(data.id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.initTable()
				}else {
					this.$message.error(res.message)
				}
			})
		},
		returnForm(data){
			this.$refs.returnForm.dialogFormVisible = true
			this.$refs.returnForm.initData(data)
		},
		getTime(data){
			if(data){
				var d = new Date(data);
				var d2 = d.getTime() - 8 * 60 * 60 * 1000
				d = new Date(d2)
				var  resDate = d.getFullYear() + '-' +
					((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
					(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
					(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
					(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
					(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());
				return resDate
			}else {
				return '暂无'
			}

		},
		search(){
			quotation({
				keywords:this.keywords,
				status:this.status
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			quotation({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		initTable(){
			this.localtionOptions = []
			quotation().then(response => {
				if(response.status == 'success'){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = response.data.data;
					this.tableTotal = response.data.totalCount
				}
			})
			options().then(res => {
				this.receive_list = res.data.receive_list
				this.own_list = res.data.own_list
			})
			localtion().then(res => {
				res.data.filter(item => {
					this.localtionOptions.push({name:item})
				})
			})
		},
		addForm(){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(1)
		},
		toDetails(data){
			this.$router.push(`/quotationDetail/${data.id}`)
		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		},
		getName(data){
			if(data){
				return data['name']
			}else {
				return '暂无'
			}
		}
	},
	computed: {
	},

}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}
	.sea{
		width: 100%;
		padding: 15px;
		background-color: #fff;
		margin: 5px 0;
		display: flex;
		justify-content: space-between;
		.item:first-child{
			display: flex;
			.sea-item:nth-child(2){
				margin: 0 5px;
			}
		}
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
}
</style>
